<template>
  <el-card class="box-card">
    <div class="box-card" ref="cardBody">
      <el-row style="margin-bottom: 5px;">
        <el-col :span="24">
          <el-select  placeholder="请选择班级" v-model="tbClassId" @change="clear" >
            <el-option v-for="tbClass in bjs" :key="tbClass.id" :value="tbClass.id" :label="tbClass.name"></el-option>
          </el-select>
          <el-select  placeholder="请选择课程" v-model="courseId" @change="clear"  >
            <el-option v-for="course in courses" :key="course.id" :value="course.id" :label="course.name"></el-option>
          </el-select>
          <el-button  icon="el-icon-search" type="primary" @click="cx">查询</el-button>
        </el-col>
      </el-row>
      <el-table
        size="mini"
        :data="data"
        border
        ref="table1"
        highlight-current-row
        v-if="tableVisible"
        >
        <el-table-column v-for="item,index in tableLable" :key="index" v-bind="item"></el-table-column>
        <el-table-column label="成绩" width="150">
          <template slot-scope="scope">
            <el-input-number  type="number" size="small" v-model="scope.row.grade" @change="setGrade(scope.row)"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        tableVisible:false,
        tbClassId: '',
        courseId: '',
        bjs:[],
        courses:[],
        tableLable:[
          {label:'学号',prop:'student.stuNo'},
          {label:'姓名',prop:'student.name'},
        ],
        data:[],
      }
    },
    created() {
      this.$ajax.post('banji/list',{}).then(res=>{
        var result=res.data;
        this.bjs=result;
      });
      this.$ajax.post('course/list',{}).then(res=>{
        var result=res.data;
        this.courses=result;
      })
    },
    methods:{
      cx(){
        this.$ajax.post('grade/page',{courseId:this.courseId,tbClassId:this.tbClassId})
        .then(res=>{
          var result=res.data.data.rows;
          this.data=result;
          this.tableVisible=true;
        })
      },
      clear(a){
        this.tableVisible=false;
      },
      setGrade(grades){
        var grade = grades.grade;
        var id = grades.id;
        this.$ajax.post('grade/stuSave',{id:id,grade:grade}).then(res=>{
          var result=res.data;
          if(result.success){
              this.$message({
                message: '保存成功',
                type: 'success'
              });
          }
        }).catch(error => {
              alert('网络连接失败...');
            })
      }
    }
  }
</script>

<style>
</style>
